<template>
	<div class="msg_cont" v-loading="loading">
		<div style="display: flex;justify-content: space-between;">
			<div class="cur title" @click="backFun" style="width: 50%;"><i class="el-icon-arrow-left"></i>
				<span style="margin-left: 1.6rem;">{{ titleMap }}</span>
			</div>
			<div class="search-box">
				<div class="prepend-select el-input--suffix">
					<div class="select-group__prepend">课程</div>
					<el-select
						remote
						v-model="search.courseId"
						:remote-method="remoteDataMethod"
						:loading="search.loading"
						placeholder="请输入关键字搜索"
						@change="keywordChangeEvent"
						@focus="remoteDataMethodFocus"
						filterable
						clearable
						reserve-keyword
					>
						<el-option v-for="item in search.dataItems" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</div>
			</div>
		</div>
		<el-card shadow="never" :border="false" v-if="listData.length > 0">
			<div class="h_full flex_column_between">
				<!-- 内容部分 -->
				<el-table :data="listData" style="width: 100%">
					<el-table-column prop="words" label="文章标题" align="left">
						<template #default="scope">
							{{ scope.row.title || '-' }}
						</template>
					</el-table-column>
					<el-table-column prop="words" label="来源" align="center" width="150">
						<template #default="scope">
							{{ scope.row.sourceType?.name || '-' }}
						</template>
					</el-table-column>
					<el-table-column label="答对数量" align="center" width="150">
						<template #default="scope">
							{{ scope.row.exercise?.rightQuestionNumber || 0 }} / {{ scope.row.exercise?.totalQuestionNumber || 0 }}
						</template>
					</el-table-column>
					<el-table-column label="正确率" align="center" width="150">
						<template #default="scope">
							{{ formatdkghdkg(scope.row.exercise?.rightQuestionNumber || 0, scope.row.exercise?.totalQuestionNumber || 0) }}%
						</template>
					</el-table-column>
					<el-table-column prop="createdAt" label="阅读时间" align="center" width="190">
						<template #default="scope">
							<div>{{ formatDate(scope.row.createdAt) }}</div>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" width="200">
						<template #default="scope">
							<div class="actions cur" @click="getDetailFun(scope.row)">
								<p>查看</p>
							</div>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<pagination :total="total" :currentPage="currentPage" :pageSize="pageSize"
					@current-change="changePage">
				</pagination>
			</div>
		</el-card>
		<template v-else>
			<empty type="1" text="暂无阅读记录"></empty>
		</template>

		<!-- 报告 -->
		<vocabularyReport v-if="isShow" :info="infoData" @close="closeFun"></vocabularyReport>

	</div>
</template>

<script>
import vocabularyReport from '@/views/components/vocabularyReport'
import { vocabularyExamList, vocabularyExamDetail } from '@/api/courseArticle.js'
import bear_content from '@/views/components/bear_content.vue'
import { getListByKeyword } from '@/api/course.js'
export default {
	components: {
		vocabularyReport,
		bear_content
	},
	data() {
		return {
			loading: false,
			titleMap: '阅读记录',
			listData: [],
			currentPage: 1, // 当前页
			pageSize: 5, // 每页条数
			total: 0, // 总条数
			isShow: false,
			learnId: 0,
			flag: null, // 1: 从课程类型进入
			userId: '',
			infoData: {},
			search: {
				loading: false,
				dataItems: [],
				courseId: null
			}
		}
	},
	mounted() {
		this.userId = this.$route.query.userId || 0
		this.learnId = this.$route.query.learnId || 0
		this.flag = this.$route.query.flag || null
		this.getList()
		this.remoteDataMethod('', true)
	},
	methods: {
		async getList() {
			this.loading = true
			let search = {
				page: this.currentPage,
			}
			if (this.userId) {
				search.userId = this.userId
			}
			if (this.search.courseId) {
				search.courseId = this.search.courseId
			}
			await vocabularyExamList(search).then(res => {
				this.loading = false
				if (res.error === 0) {
					this.listData = res.data.list
					this.total = res.data.total
					this.pageSize = res.data.perPage
				}
			})
		},
		//获取详情
		getDetailFun(row) {
			if (row.sourceType?.value == 2) {
				this.$router.push(`/aireading/answer?exerciseId=${row.exercise?.id || 0}&userId=${this.userId}&articleId=${row.id}`);
				return;
			}
			this.$router.push(`/reading/answer?exerciseId=${row.exercise?.id || 0}&userId=${this.userId}&articleId=${row.id}`);
		},
		changePage(page) {
			this.currentPage = page
			this.getList()
		},
		closeFun() {
			this.isShow = false
		},
		searchFun() {

		},
		formatDate(time) {
			if (time) {
				let createdTime = time.split('-')
				time = createdTime[0] + '.' + createdTime[1] + '.' + createdTime[2]
			}
			return time
		},
		formatdkghdkg(a, b) {
			if (b < 1) {
				return 0;
			}
			return parseFloat((a / b).toFixed(2))
		},
		backFun() {
			this.$router.push({ path: '/student/list' })
		},
		/**
         * 远程搜索数据
         * @param {*} keyword 
         */
		remoteDataMethod(keyword, init = false) {
            if (keyword || init) {
                this.search.loading = true
                getListByKeyword(keyword).then(data => {
                    this.search.loading = false
                    this.search.dataItems = data
                }).catch(() => {
                    this.search.loading = false
                })
            }
        },
        remoteDataMethodFocus(e) {
            if (!this.search.dataItems.length) {
                this.remoteDataMethod('', true)
            }
        },
		keywordChangeEvent(e) {
			this.getList()
        }
	}
}
</script>
<style lang="scss" scoped>
@import "~@/styles/mixins.scss";
.msg_cont {
	width: 100%;
	height: 100%;
	background: #fff;
	border-radius: 2.0rem;
	padding: 3.4rem 3.2rem;
}

.search {
	// border: 1px solid $background-theme;
	// border-radius: 10px 0px 0px 10px;
	::v-deep .el-input__inner {
		border-radius: 10px 0px 0px 10px !important;
		border: 1px solid $background-theme !important;
	}
}
.title {
	font-size: 2.4rem;
	font-size: 2.4rem;
	color: #1A1A1A;
}

.el-descriptions {
	margin-top: 4.8rem;
	margin-top: 4.8rem;
}

.el-card {
	width: 100%;
	height: 100%;
	border: none;

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 1.6rem;
		padding-right: 1.6rem;
	}

	.actions {
		font-size: 1.8rem;
		font-size: 1.8rem;
		display: flex;
		justify-content: space-around;
		color: #019E69;

		>i:hover {
			color: rgba(114, 124, 245, 1);
			cursor: pointer;
		}
	}
}

::v-deep .el-card__header {
	border-bottom: none;
}

::v-deep .el-card__body {
	height: 100%;
	padding: 2.0rem 0;
}

::v-deep .el-table::before {
	background-color: transparent !important;
}

::v-deep .el-table {
	padding-right: 1.0rem;
	overflow-y: scroll;
	font-size: 2rem;

	&::-webkit-scrollbar {
		width: .6rem;
		height: .1rem;
	}

	&::-webkit-scrollbar-thumb {
		border-radius: .5rem;
		background-color: #019E69;
	}

	&::-webkit-scrollbar-track {
		background: #fff;
		border-radius: .5rem;
	}
}
.search-box {
    // width: 280px;
    // position: absolute;
    // right: 2rem;
    // top: 2rem;

    :deep(.el-input__inner) {
        border-radius: 0rem 1rem 1rem 0rem !important;
    }

    :deep(.select-group__prepend) {
        border-radius: 1rem 0rem 0rem 1rem;
        color: #fff;
        background: $background-theme;
        border: 1px solid $background-theme;
    }
}

::v-deep .el-input-group__append {
    border-radius: 0px 1rem 1rem 0px;
    color: #fff;
    background: $background-theme;
    border: 1px solid $background-theme;
}

.search-ipt {
    width: 280px;
    border-radius: 20px;
    position: absolute;
    right: 2rem;
    top: 2rem
}

.prepend-select {
    --el-input-height: var(--el-component-size);
    --el-input-border-radius: var(--el-border-radius-base);
    --el-input-border-color: var(--el-border-color);
    
    width: 100%;
    display: inline-flex;
    align-items: stretch;
    position: relative;
    font-size: var(--el-font-size-base);
    line-height: var(--el-input-height);
    box-sizing: border-box;
    vertical-align: middle;
    border-radius: var(--el-input-border-radius);
    
    .select-group__prepend {
        font-size: 14px;
        background-color: $background-theme;
        color: #fff;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 100%;
        border-radius: 1rem 0rem 0rem 1rem;
        padding: 0 10px;
        white-space: nowrap;
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        box-shadow: 1px 0 0 0 var(--el-input-border-color) inset,0 1px 0 0 var(--el-input-border-color) inset,0 -1px 0 0 var(--el-input-border-color) inset;
        border: 1px solid $background-theme;
    }

    :deep(.el-select .el-input__wrapper) {
        border-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}
</style>
